<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color: #000; font-weight: 600">存储配置</span>
        <div style="margin-top: 10px">用于图片上传保存等场景</div>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
        <!-- <el-tab-pane label="本地存储"
                     name="1">
          <localStorage :data="localCurrent"
                        @done="init"
                        :tabSwitch="tabSwitch"></localStorage>
        </el-tab-pane> -->
        <el-tab-pane label="阿里云oss" name="2">
          <alibabaCloudOSS
            :data="alyCurrent"
            @done="init"
            :tabSwitch="tabSwitch"
          ></alibabaCloudOSS>
        </el-tab-pane>
        <el-tab-pane label="七牛云" name="3">
          <qiniuyunOss
            :data="qnyCurrent"
            @done="init"
            :tabSwitch="tabSwitch"
          ></qiniuyunOss>
        </el-tab-pane>
        <!-- <el-tab-pane label="腾讯云" name="4"> -->
        <!-- <tencentCloudOss
            :data="txyCurrent"
            @done="init"
            :tabSwitch="tabSwitch"
          ></tencentCloudOss> -->
        <!-- </el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import alibabaCloudOSS from './components/alibabaCloudOSS.vue';
  import localStorage from './components/localStorage.vue';
  import qiniuyunOss from './components/qiniuyunOss.vue';
  import tencentCloudOss from './components/tencentCloudOss.vue';
  import { storageInsert, storageConfigDetail } from '@/api/storageInfo/index';
  export default {
    components: { alibabaCloudOSS, qiniuyunOss },
    data() {
      return {
        activeName: '2',
        tabSwitch: '2',
        localCurrent: null,
        alyCurrent: null,
        qnyCurrent: null,
        txyCurrent: null
      };
    },
    created() {
      this.init();
    },
    methods: {
      handleClick(tab) {
        console.log(tab);
        this.tabSwitch = tab;
        this.init();
      },
      init() {
        storageConfigDetail({
          // id: this.$store.state.user.info.userId
        })
          .then((res) => {
            console.log(res);
            if (this.tabSwitch == '1') {
              this.localCurrent = res;
            } else if (this.tabSwitch == '2') {
              this.alyCurrent = res;
            } else if (this.tabSwitch == '3') {
              this.qnyCurrent = res;
            } else {
              this.txyCurrent = res;
            }
          })
          .catch((e) => {
            this.$message.error(e);
          });
      }
    }
  };
</script>

<style lang="less" scoped></style>
